<template>
    <div class="page">
        <!--搜索-->
        <div class="search-fixed">
            <app-search :style="{backgroundColor:'rgba(4, 174, 201,'+ bgRgba +')'}">
                <router-link slot="right" class="msg-icson header-sprites" to="/msg"></router-link>
            </app-search>
        </div>
        <!--banner-->
        <div class="home-banner relative">
            <div class="banner-bg"></div>
            <swiper :options="{pagination:'.swiper-pagination',bulletClass:'default-bullet',bulletActiveClass:'default-bullet-active',loop: true,autoplay: 3500}">
                <!--slide-->
                <swiper-slide v-for="(path,index) in banner" :key="index" :style="{backgroundImage:'url('+path+')'}"></swiper-slide>
                <!--pagination-->
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <!--主导航-->
        <div v-if="nav.length!==0" class="home-nav">
            <ul class="flexbox items-center">
                <li v-for="(item,index) in nav" :key="index">
                    <router-link :to="item.url">
                        <img :src="item.image_path" />
                        <p v-text="item.title"></p>
                    </router-link>
                </li>
            </ul>
        </div>
        <!--今日推荐-->
        <div v-if="hotProduct.length!=0" class="home-hot">
            <div class="home-hot-title">
                <router-link class="hot-more-link flexbox items-center justify-center pull-right" to="/index/today">
                    <span>更多推荐</span>
                    <i class="home-sprites"></i>
                </router-link>
                <div class="full-title flexbox" v-pre>
                    <span>今日推荐</span>
                    <span class="sub-title">好货超优惠</span>
                </div>
            </div>
            <swiper :options="{slidesPerView: 4,freeMode: true}">
                <swiper-slide v-for="(item,index) in hotProduct" :key="index">
                    <router-link :to="{path:'/product/detail/',query:{proid:item.proid}}">
                        <img class="img-responsive row" :src="item.image_path">
                        <p class="price">{{item.price | Currency}}</p>
                    </router-link>
                </swiper-slide>
            </swiper>
        </div>
        <!--大家都在看-->
        <div v-if="recommendProduct.length!==0" class="home-recommend">
            <div class="recommend-title flexbox items-center justify-center" v-pre>
                <span>大家都在看</span>
            </div>
            <ul class="flexbox flex-wrap">
                <each-list v-for="(item,index) in recommendProduct" :item="item" :key="index"></each-list>
            </ul>
            <app-loading v-if="show" :end="end"></app-loading>
        </div>
        <!--footer-->
        <app-footer></app-footer>
    </div>
</template>
<script>
import mixin from "@/mixin";
import appSearch from "@/components/common/Search";
import appLoading from "@/components/common/Loading";
import appFooter from "@/components/common/Footer";
import eachList from "@/components/common/EachList";
export default {
  data() {
    return {
      bgRgba: 0,
      banner: [], // banner
      nav: [], //主导航
      hotProduct: [], //今日推荐
      recommendProduct: [], //大家都在看
      page: 1, // 当前页
      show: false, // 加载状态
      flag: true, // 防止重复加载
      end: false // 分页是否全部加载
    };
  },
  mixins: [mixin],
  components: {
    appSearch,
    appLoading,
    appFooter,
    eachList
  },
  methods: {
    load_home_data() {
      this.api.get_home_data().then(response => {
        // 请求接口
        // 赋值
        var data = response.data;
        this.banner = data.banner;
        this.nav = data.nav;
        this.hotProduct = data.product_hot;
        this.recommendProduct = data.product_recommend;
      });
    },
    scroll() {
      // 设置搜索背景
      this.bgRgba = window.scrollY / 100 <= 1 ? window.scrollY / 100 : 1;

      // 加载分页数据(当前网页高度 <= (网页被卷进去的距离 + 文档显示区的宽度) + 500(提前加载))
      var scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      if (document.body.offsetHeight <= scrollTop + window.innerHeight + 500) {
        // 模拟加载全部分页
        if (this.page > 4) {
          this.show = true;

          // 全部加载完成
          this.end = true;

          // 终止
          return false;
        }

        // 防止重复加载
        if (this.flag) {
          // 数据返回之前 滚动禁止重复请求
          this.flag = false;

          // 显示加载动画
          this.show = true;

          // api
          this.api
            .get_product_list({
              params: {
                type: "watchlist", // 类型
                page: (this.page += 1), // 当前请求页
                pagesize: 6 // 每页返回数
              }
            })
            .then(response => {
              // 恢复滚动请求
              this.flag = true;

              // 关闭加载动画
              this.show = false;

              // 更新数组
              var list = response.data.product_list;
              list.forEach((item, index) => {
                this.recommendProduct.push(item);
              });
            });
        }
      }
    }
  },
  created() {
    // 初始化数据
    this.load_home_data();
  },
  mounted() {
    // 滚动操作
    window.addEventListener("scroll", this.scroll);
  },
  beforeDestroy() {
    //销毁前移除滚动事件
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>

<style src="@/assets/scss/index.scss" lang="scss"></style>